<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useRoute
	} from 'vue-router'
	import {
		h5TitleRight,
	} from "@/config/index.js"
	import {
		navigateBack,
	} from "@/assets/scripts/navigate.js"
	import {
		getCommonChecklistApi,
	} from '@/assets/api/other/article.js'
	import {
		getArticleMsgApi,
		sendArticleMsgApi
	} from "@/assets/api/other/memorialHall.js"
	import titleColumn from '@/components/titleColumn.vue'
	import leaveMessageCard from '@/components/leaveMessageCard.vue'

	const id = ref('')
	const dataSource = ref({})
	const leaveMessageList = ref([])
	const pageNum = ref(1)
	const total = ref(10)
	const loading = ref(true)
	const msgPopup = ref()
	const msgInpHeight = ref(24)
	const msgInp = ref('')

	onMounted(async () => {
		route_init() // 路由参数
		data_init() // 数据
		leaveMessageList_init()
	})

	const leaveMessageList_init = async () => {
		const res = await getArticleMsgApi(id.value, pageNum.value)
		if (res.code === 200) {
			total.value = res.total
			const rows = res.total <= (pageNum.value - 1) * 10 ? [] : res.rows
			leaveMessageList.value = [...leaveMessageList.value.slice(0, (pageNum.value - 1) * 10), ...rows]
			loading.value = false
		}
	}

	const handleMore = () => {
		if (loading.value) return
		loading.value = true
		pageNum.value = pageNum.value + 1
		leaveMessageList_init()
	}

	const route_init = async () => {
		const route = useRoute()
		if (route.query.id && route.query.id !== 'undefined') {
			id.value = route.query.id
		}
	}

	const data_init = async () => {
		const res = await getCommonChecklistApi(id.value)
		if (res.code === 200) {
			dataSource.value = res.data
		}
	}

	const msg_handleClick = () => {
		msgPopup.value.open()
	}

	const msgClose_handleClick = () => {
		msgPopup.value.close()
	}

	const handleSendMsg = async () => {
		if (msgInp.value.length == 0) {
			uni.showToast({
				title: '输入你的留言'
			})
			return
		}

		const res = await sendArticleMsgApi({
			ccType: '文章',
			ccContent: msgInp.value,
			articleId: id.value,
		})
		if (res.code === 200) {
			uni.showToast({
				title: '留言成功',
				icon: 'success',
				complete: () => {
					msgPopup.value.close()
					leaveMessageList_init() // 请求留言列表
				}
			})
		}
		msgInp.value = ''
	}
</script>

<template>
	<view class="">
		<uv-navbar :fixed="false" bgColor="#f8f8f8" :title="h5TitleRight">
			<template v-slot:left>
				<view class="d-flex d-flex-aic" @click="navigateBack">
					<uv-icon name="arrow-left" size="19"></uv-icon>
					返回
				</view>
			</template>
		</uv-navbar>
		<view class="p-normal box">
			<view class="text-ellipsis-2 mt-normal  font-fs20 font-wb title">
				{{dataSource.aTitle}}
			</view>
			<view class="font-fs12 mt-normal pb-normal d-flex d-flex-aic time">
				<uv-icon class="mr-small" name="clock-fill" color="#666666"></uv-icon>
				{{dataSource.createTime}}
			</view>
			<view v-html="dataSource.aText" class="mt-normal font-fs16 content">
			</view>

			<!-- 留言列表 -->
			<uv-row class="p-normal pt-small mt-normal" v-if="dataSource.aType !== '追忆文章'">
				<uv-col>
					<titleColumn :isShowMore='false'>
						<template #title>
							<view>留言列表</view>
						</template>
						<template #content>
							<view class="pb-small">
								<uv-empty class="py-normal" mode="list" icon="empty-favor"
									style="background-color: #fff" v-if="!leaveMessageList.length"></uv-empty>
								<uv-row class="mb-normal" v-for="(item,index) in leaveMessageList" :key="index">
									<uv-col>
										<leaveMessageCard :data="item"></leaveMessageCard>
									</uv-col>
								</uv-row>
								<uv-row class="mb-normal">
									<uv-col>
										<uv-button class="mb-normal" text="留言" @click="msg_handleClick"></uv-button>
									</uv-col>
									<uv-col>
										<uv-button class="mb-normal" v-if="!loading && total > pageNum * 10"
											type="success" text="查看更多" @click="handleMore"></uv-button>
									</uv-col>
								</uv-row>

							</view>
						</template>
					</titleColumn>
				</uv-col>
			</uv-row>
		</view>

		<uv-popup ref="msgPopup" mode="bottom">
			<view class="msg-popup">
				<view class="d-flex d-flex-jcsb d-flex-aic px-normal head">
					<view class="font-fs18">
						留言内容
					</view>
					<view class="" @click="msgClose_handleClick">
						关闭
					</view>
				</view>
				<view class="p-normal">
					<uni-easyinput type="textarea" v-model="msgInp" placeholder="输入你的留言"></uni-easyinput>
					<!-- <uv-textarea v-model="msgInp" placeholder="输入你对逝者的思念" :height='msgInpHeight'
							@focus="msgInpHeight = 70" @blur="msgInpHeight = 24"></uv-textarea> -->
					<uv-button @click="handleSendMsg" class="mt-normal" type="success" text="留言"></uv-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<style lang="scss" scoped>
	.title {
		color: #303133;
	}

	.time {
		color: #666666;
		border-bottom: 1px solid #dddddd;
	}

	.content {
		color: #666666;
	}

	::v-deep .box {
		img {
			display: block !important;
			width: min-content !important;
			max-width: 100% !important;
			margin: 0 auto !important;
		}
	}

	.msg-popup {
		.head {
			background-color: #1ab752;
			color: #fff;
			height: 40px;
		}

		.inp {
			background-color: #f0efed;
			padding: 5px 10px !important;
		}

		.body {
			background-color: #f0f0f0;
			height: 200px;
			box-sizing: border-box;
		}
	}
</style>